<template>
    <div class="parametersettings">
        <Nav></Nav>
        <div class="writing_right">
            <div class="parametersettingsTitleList">
                <div class="TitleList_padding">
                    <div class="TitleList_top">
                        <div class="parametersettings_content_top">
                            <div class="content_top_logo"><img src="@a/img/logo2.png" /></div>
                            <span class="content_top_span1"></span>
                            <div class="content_top_icon"><img src="@a/img/sv13.svg" /></div>
                            <span class="content_top_span2"></span>
                            <div class="content_top_logo"><img :src="demo_logo" /></div>
                        </div>
                        <div class="TitleList_top_title">
                            <span>AI-DOG</span>与<span>[{{ demo_name }}]</span>建立数据通道
                        </div>
                    </div>
                </div>

                <div class="emailmo_step">
                    <div class="emailmo_step_list on">
                        <div class="step_list_icon">1</div>
                        <div class="step_list_title">安装插件</div>
                    </div>
                    <span></span>
                    <div class="emailmo_step_list">
                        <div class="step_list_icon">2</div>
                        <div class="step_list_title">网站信息</div>
                    </div>
                    <span></span>
                    <div class="emailmo_step_list">
                        <div class="step_list_icon">3</div>
                        <div class="step_list_title">添加成功</div>
                    </div>
                </div>

                <div class="parametersettings_content">
                    <div class="parametersettings_content_title"><img :src="demo_logo" />{{demo_name}}插件安装</div>
                    <div class="parametersettings_content_bottom">
                        <div class="Edit_content">
                            <div class="Edit_content_list password">
                                <div class="content_list_dd">
                                    接口密码
                                    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                                        <el-button><img src="@a/img/sv12.svg" /></el-button>
                                    </el-tooltip>
                                </div>
                                <div class="content_list_dt">
                                    <el-input
                                    placeholder="请填写配置的接口密码"
                                    ref="inputRef"
                                    v-model="passwordValue"
                                    @input="handleInput">
                                    </el-input>
                                    <div class="list_dt_btn" @click="generate()" v-if="isActive">生成</div>
                                    <div class="list_dt_btn" @click="copyInputValue" v-if="!isActive">复制</div>
                                    <div class="list_dt_hint">如修改密码，必须重新下载安装包并上传</div>
                                </div>
                            </div>
							
							
							<div class="down_site_plus" v-show="site_demo.interface_file!=''">
								<el-button type="primary" @click="download_plus()">下载安装包({{site_demo.version}})<br><p>系统会自动将密码替换到安装包里，您只需上传即可。</p></el-button>
							</div>
							
							
                            <div class="Edit_content_title">安装说明</div>
                            <div class="Edit_content_editor">
                                <div style="text-align: center; line-height: 300px; width: 100%;" v-html="description_content"></div>
                            </div>
							
					
							
                            <div class="Edit_btn">
                                <!-- <button class="back" @click="goOff()">上一步</button> -->
<!--                                 <button class="save" @click="save">下一步</button>-->
                                 <button class="saveA" @click="save1">我已完成以上操作并下一步</button>
<!--                                <router-link class="Edit_btn_list save" :to="'/writing/siteManagement/websiteInformation?id='+info.id + '&key=' + passwordValue">下一步</router-link>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Question">
          <div class="Question_title">
            <div class="Question_title_dd">接入过程中有问题？</div>
            <div class="Question_title_dt">点击下方按钮咨询客服一对一协助你开发。</div>
          </div>
          <div class="Question_btn"><a href="https://work.weixin.qq.com/kfid/kfc93ed84ae79165746" target="_blank">咨询客服</a></div>
        </div>
    </div>
</template>

<script>
    import ClipboardJS from 'clipboard';
    import Nav from "@c/common/nav/nav";

    export default {
        name: "parametersettings",
        data() {
            return {
                demo_name:'',
                demo_logo:'',
				site_demo:[],
				demo_id:0,//站点demoid
                isActive: true,
                description_content:'',
                testData:{
                  title: '',
                  url: '',
                  catid: '',
                  newstime: '',
                  content: ''
                },
                info: {

                },
                site_classes: [],
                showPreview: false,



                pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
                },
                value1: '',
                value2: '',
                passwordValue: '',
            };
        },
        components: {
            Nav
        },
        computed: {
          handleInput() {
              this.isActive = this.passwordValue.length === 0;
          },
		  
        },
        methods:{
          save1(){
            if(!this.passwordValue) {
              this.$message.error('生成密码不能为空！');
              return false;
            }
            if(this.$route.query.sid){
              this.$router.push({path:'/writing/siteManagement/websiteInformation?sid='+ this.$route.query.sid + '&key=' + this.passwordValue})

            }else{
              this.$router.push({path:'/writing/siteManagement/websiteInformation?id='+ this.$route.query.id + '&key=' + this.passwordValue})

            }
          },
		  //下载安装包
		  download_plus(){
              let site_demo_id = this.$route.query.id
			  let site_id = this.$route.query.sid
              this.axios.post('/api/site/downloadPlus', {
                'site_id' : site_id,
				'site_demo_id' : site_demo_id,
                'key' : this.passwordValue
              }).then(res => {
                if(res.code === 1) {
				   window.open(res.result, '_blank');
                   this.$msgbox('接口获取成功，密码已自动替换，请解压上传到网站根目录','获取成功。')
                }else{
                  this.$msgbox(res.msg, '测试发布失败')
                }
              })			  
			  
		  },
          testPush(){
              let that = this;
              that.axios.post('/api/site/testPush', {
                'site' : that.info,
                'data' : that.testData
              }).then(res => {
                if(res.code === 1) {
                  that.$msgbox('测试发布成功','提示')
                }else{
                  that.$msgbox(res.result, '测试发布失败')
                }
              })
          },
          toTest(){
           let that = this;
            this.axios.post('/api/site/getClassesByUrl', {
              url:  that.info.website + that.info.column_interface
            }).then(res => {
              if(res.code === 1) {

                that.site_classes = res.result
                that.testData.url = that.info.website + that.info.publishing_interface
                that.showPreview = true

              }else{
                that.$msgbox(res.result, '获取栏目错误')
              }
            })

          },
          save(){
            let that = this;
            that.axios.post('/api/site/add', that.info).then(res => {
              if(res.code === 1) {
                this.$router.push({path:'/writing/siteManagement'})
              }
            })
          },
        goOff(){
            this.$router.go(-1);
        },


            handleInput() {
                this.isActive = this.passwordValue.length === 0;
            },
            generate(){
                this.isActive = !this.isActive
                const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                const lowercaseLetters = 'abcdefghijklmnopqrstuvwxyz';
                const numbers = '0123456789';
                const specialCharacters = '';

                let password = '';
                password += this.getRandomCharacter(uppercaseLetters);
                password += this.getRandomCharacter(lowercaseLetters);
                password += this.getRandomCharacter(numbers);
                password += this.getRandomCharacter(specialCharacters);

                for (let i = 0; i < 45; i++) {
                    password += this.getRandomCharacter(
                    uppercaseLetters + lowercaseLetters + numbers + specialCharacters
                    );
                }

                this.passwordValue = password;
            },
            getRandomCharacter(characters) {
                const randomIndex = Math.floor(Math.random() * characters.length);
                return characters.charAt(randomIndex);
            },
            copyInputValue() {
                const input = this.$refs.inputRef.$el.querySelector('input')
                input.select()
                document.execCommand('copy')
                this.$message.success('已复制到剪贴板')
            },





          getData(){
            let that = this;
              let id = this.$route.query.id
              if(id) {
				this.generate()
                that.axios.get('/api/site/getDemo', {
                  params: {
                    id
                  }
                }).then(res => {
                  if(res.code === 1) {
					that.site_demo=res.result
                    that.description_content = res.result.description_content
                    that.demo_name = res.result.name;
                    that.demo_logo = res.result.logo_image;
                  }
                })
              }else{				
                id = this.$route.query.sid
                if(id){
                  that.axios.get('/api/site/getSite', {
                    params: {
                      id
                    }
                  }).then(res => {
                    if(res.code === 1) {
					  this.demo_id=res.result.site_demo_id
                      that.info = res.result;
                      if(this.$route.query.key){
                        this.passwordValue = this.$route.query.key
                      }else{
                        that.passwordValue = that.info.secret_key
                      }
                      that.axios.get('/api/site/getDemo', {
                        params: {
                          id: that.info.site_demo_id
                        }
                      }).then(res => {
                        if(res.code === 1) {
						  this.site_demo=res.result
                          that.description_content = res.result.description_content
                          that.demo_name = res.result.name;
                          that.demo_logo = res.result.logo_image;
                        }
                      })
                    }
                  })
                }
				
              }

          }
        },
        created() {
			if(this.$route.query.id){
				this.demo_id=this.$route.query.id
			}
		  
          this.getData()
          if(this.$route.query.key){
            this.passwordValue = this.$route.query.key
          }
        },
    }
</script>

<style>
  @import "parameterSettings.css";
</style>
